<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :close-on-click-modal="false"
    :title="
     $t('wangluoshezhi.bianjiwangkou') 
    "
    :append-to-body="true"
    width="520px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item :label="$t('wangluoshezhi.wangkou')" prop="networkPort">
          <el-input readonly v-model="formData.networkPort" />
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.moshi')" prop="ip_method">
          <el-radio-group v-model="formData.ip_method">
            <el-radio label="static">{{$t('wangluoshezhi.static')}}</el-radio>
            <el-radio label="dhcp">DHCP</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.macdizhi')" prop="hw_addr">
          <el-input v-model="formData.hw_addr" readonly />
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.ipbanben')" prop="ip_version">
          <el-select v-model="formData.ip_version">
            <el-option
              v-for="item in ipVersionList"
              :key="item.value"
              :lable="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.addr')" prop="ip" :required="formData.ip_method !== 'dhcp'">
          <NetworkInput  :disabled="formData.ip_method === 'dhcp'" v-model="formData.ip" />
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.subnetmask')" prop="netmask" :required="formData.ip_method !== 'dhcp'">
          <NetworkInput :disabled="formData.ip_method === 'dhcp'" v-model="formData.netmask" />
        </el-form-item>
        <el-form-item :label="$t('wangluoshezhi.gateway')"  prop="gateway" :required="formData.ip_method !== 'dhcp'">
          <NetworkInput :disabled="formData.ip_method === 'dhcp'" v-model="formData.gateway" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton @click="cancel">{{ $t("common.cancel") }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{ $t("common.confirm") }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import {  setNetwork } from "./service";
import _ from "lodash";
import MyButton from "@/components/Button";
import NetworkInput from "@/components/input/Network.vue";
export default {
  components: { MyButton, NetworkInput },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }
    },
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", _.cloneDeep(val));
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  data() {
    return {
      formData: {},
      rules: {
        ip: [{ validator: this.validateIp, trigger: "change"}],
        netmask: [{ validator: this.validateIp, trigger: "change"}],
        gateway: [{ validator: this.validateIp, trigger: "change"}]
      },
      ipVersionList: [
        { label: "IPV4", value: "IPv4" },
        { label: "IPV6", value: "IPv6", disabled: true }
      ]
    };
  },
  methods: {
    confirm() {
      console.log(this.formData);
      this.$refs.form.validate(valid => {
        if (valid) {
            const params = {
                ...this.formData,
                networkPort:void 0,
                isAutoGet:void 0
            }
            setNetwork(params).then(res => {
                if (res.code === 0) {
                    this.$message.success(this.$t("common.edit_success"));
                    this.$emit("refresh");
                    this.cancel();
                } 
            }).catch(err => {
                console.log(err);
            });
        }
      });
    },
    cancel() {
      this.$refs.form.resetFields();
      this._visible = false;
    },
    handleClose(done) {
      this.$refs.form.resetFields();
      this._visible = false;
      done();
    },
    validateIp(rule,value,callback) {
        console.log(value)
         const ipPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        if (ipPattern.test(value)) {
          callback()
        } else {
          callback(new Error(this.$t("wangluoshezhi.ip_error")))
        }
    },
  }
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
    }
  }
}
</style>
